<template>
  <div class="page-content">
    <div class="header">
      <div class="header-left" @click="cancelUpload">
        <span class="cancel-text">取消</span>
      </div>
      <div class="header-title">发布打卡</div>
      <div class="header-right" @click="submit" :class="{ disabled: !canSubmit }">
        <span class="submit-text">发布</span>
      </div>
    </div>
    
    <div class="container">
      <!-- 内容输入 -->
      <textarea 
        v-model="content" 
        class="content-input" 
        placeholder="分享你的故事..."
        rows="6"
        maxlength="500"
      ></textarea>
      <div class="char-count">{{ content.length }}/500</div>
      
      <!-- 图片选择 -->
      <div class="image-upload-section">
        <div class="upload-list">
          <!-- 已选择的图片 -->
          <div v-for="(img, index) in selectedImages" :key="index" class="upload-item">
            <img :src="img" alt="预览图片" class="preview-image" />
            <div class="remove-btn" @click="removeImage(index)">×</div>
          </div>
          
          <!-- 添加图片按钮 -->
          <div v-if="selectedImages.length < 9" class="upload-item add-btn" @click="selectImages">
            <div class="add-icon">+</div>
            <div class="add-text">添加图片</div>
          </div>
        </div>
        <div class="upload-tip">最多上传9张图片</div>
      </div>
      
      <!-- 位置选择 -->
      <div class="location-section">
        <div class="location-item" @click="selectLocation">
          <div class="location-icon">📍</div>
          <div class="location-text" v-if="location">{{ location }}</div>
          <div class="location-placeholder" v-else>添加位置</div>
          <div class="location-arrow">›</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { mock } from '../utils/mockData.js'

export default {
  name: 'Upload',
  setup() {
    const router = useRouter()
    const content = ref('')
    const selectedImages = ref([])
    const location = ref('')
    const latitude = ref(0)
    const longitude = ref(0)
    
    // 计算是否可以提交
    const canSubmit = computed(() => {
      return content.value.trim().length > 0
    })
    
    // 选择图片
    const selectImages = () => {
      // 创建一个隐藏的input元素
      const input = document.createElement('input')
      input.type = 'file'
      input.accept = 'image/*'
      input.multiple = true
      
      // 限制最多选择的图片数量
      input.onchange = (e) => {
        const files = e.target.files
        if (files) {
          const remainingSlots = 9 - selectedImages.value.length
          const filesToAdd = Math.min(files.length, remainingSlots)
          
          for (let i = 0; i < filesToAdd; i++) {
            const file = files[i]
            // 创建一个本地预览URL
            const reader = new FileReader()
            reader.onload = (event) => {
              selectedImages.value.push(event.target.result)
            }
            reader.readAsDataURL(file)
          }
        }
      }
      
      // 触发选择文件
      input.click()
    }
    
    // 移除图片
    const removeImage = (index) => {
      selectedImages.value.splice(index, 1)
    }
    
    // 选择位置
    const selectLocation = () => {
      // 这里可以实现位置选择功能
      // 模拟选择位置
      location.value = '当前位置'
      latitude.value = 39.9042
      longitude.value = 116.4074
    }
    
    // 取消上传
    const cancelUpload = () => {
      if (content.value.trim() || selectedImages.value.length > 0) {
        if (confirm('确定要放弃编辑吗？')) {
          router.push('/')
        }
      } else {
        router.push('/')
      }
    }
    
    // 提交打卡
    const submit = async () => {
      if (!canSubmit.value) return
      
      try {
        // 模拟上传图片，这里直接使用本地URL
        const imageUrls = selectedImages.value
        
        // 创建打卡数据
        const checkInData = {
          content: content.value.trim(),
          imageUrls,
          location: location.value,
          latitude: latitude.value,
          longitude: longitude.value
        }
        
        // 使用mock数据创建打卡
        const newCheckIn = mock.createCheckIn(checkInData)
        
        // 跳转到首页
        router.push('/')
      } catch (error) {
        console.error('发布打卡失败:', error)
        alert('发布失败，请重试')
      }
    }
    
    return {
      content,
      selectedImages,
      location,
      canSubmit,
      selectImages,
      removeImage,
      selectLocation,
      cancelUpload,
      submit
    }
  }
}
</script>

<style scoped>
.content-input {
  width: 100%;
  border: none;
  resize: none;
  font-size: 16px;
  line-height: 1.6;
  padding: 12px 0;
  outline: none;
  font-family: inherit;
}

.char-count {
  text-align: right;
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 16px;
}

.image-upload-section {
  margin-bottom: 16px;
}

.upload-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.upload-item {
  aspect-ratio: 1;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.remove-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.add-btn {
  border: 1px dashed #e0e0e0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
  cursor: pointer;
}

.add-icon {
  font-size: 32px;
  color: var(--text-light);
  margin-bottom: 4px;
}

.add-text {
  font-size: 12px;
  color: var(--text-light);
}

.upload-tip {
  font-size: 12px;
  color: var(--text-light);
  text-align: center;
}

.location-section {
  padding: 12px 0;
}

.location-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}

.location-icon {
  font-size: 16px;
  margin-right: 8px;
}

.location-text {
  flex: 1;
  font-size: 14px;
}

.location-placeholder {
  flex: 1;
  font-size: 14px;
  color: var(--text-light);
}

.location-arrow {
  color: var(--text-light);
  font-size: 18px;
}

.cancel-text,
.submit-text {
  font-size: 16px;
}

.submit-text {
  color: var(--primary-color);
}

.submit-text.disabled {
  color: #ccc;
}
</style>